import React, { Component } from 'react';

class Cat extends Component {
    render () {
        const mouse = this.props.mouse;
        return (
            <div>
                {mouse.x} - {mouse.y}
            </div>
        );
    }
}

class Mouse extends Component {
    state = { x: 0, y: 0 };

    handleMouseMove = (e) => {
        this.setState({
            x: e.clientX,
            y: e.clientY
        });
    }

    render () {
        return (
            <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
                {this.props.render(this.state)}
            </div>
        );
    }
}

class Home extends Component {
    render () {
        return (
            <div>
                <h1>移动鼠标</h1>
                <Mouse render={(mouse) => (
                    <Cat mouse={mouse} />
                )} />
            </div>
        );
    }
}

export default Home;
